<script setup lang="ts">
import { computed, onMounted, ref, onBeforeMount, toRaw, watch } from 'vue';
import { taskStore } from "@/store/modules/task";
import dayjs from "dayjs";
import userLayOutSettingStore from '../../store/modules/setting';
import { getTasklist } from '../../utils/task';


let taskState = taskStore();
let rawTaskList = JSON.parse(getTasklist()|| '[]')
// 判断日期是否有任务
const hasTask = (date: string) => {
  const  day = dayjs(date).format("YYYY-MM-DD")
  let list = new Array();
  for (let i = 0; i < rawTaskList.length; i++) {
    let taskday = dayjs(rawTaskList[i].taskTime).format("YYYY-MM-DD");
    if (day === taskday) {
      list.push(rawTaskList[i]);
    }
  }

  if(list.length > 0){
    return true
  }else{
    return false
  }
};

//日历点击
const handleDateClick = (date: string) => {
  const formattedDate = dayjs(date).format("YYYY-MM-DD HH:mm:ss");
  taskState.openDialog(formattedDate);
};

//今日任务完成进度
const taskStatus =  (date:any) => {
  const  day = dayjs(date).format("YYYY-MM-DD")
  let list = new Array();
  for (let i = 0; i < rawTaskList.length; i++) {
    let taskday = dayjs(rawTaskList[i].taskTime).format("YYYY-MM-DD");
    if (day === taskday) {
      list.push(rawTaskList[i]);
    }
  }
  let hasCompleted = false;
  let hasUnCompleted = false;

  for (let i = 0; i < list.length; i++) {
    if (list[i].comleted === 1) {
      hasCompleted = true;
    } else {
      hasUnCompleted = true;
    }
  }

  if (hasCompleted == true && hasUnCompleted ==false) {
    return "completed"; // 全部完成
  } else if (hasCompleted == true && hasUnCompleted == true) {
    return "completing"; // 部分完成
  } else if (hasCompleted == false && hasUnCompleted == true) {
    return "uncompleted"; // 全部未完成
  }

};

let LayOutSettingStore = userLayOutSettingStore();
onBeforeMount (() => {

});
onMounted(() => {

});
watch( () => taskState.dialogFlag,
() =>{

} 
)

</script>

<template>
  <el-calendar>
    <template #date-cell="{ data }">
      <div class="date-cell" @click="handleDateClick(data.day)">
        <!-- 显示日期 -->
        <span class="day-number">
          {{ data.day.split("-").slice(2).join("-") }}
        </span>

        <!-- 任务状态指示 -->
        <div
          v-if="hasTask(data.day)"
          class="task-indicator"
          :class="{
            completed: taskStatus(data.day) == 'completed',
            completing: taskStatus(data.day) == 'completing',
            uncompleted: taskStatus(data.day) == 'uncompleted',
          }"
        >
          <span v-if="taskStatus(data.day) == 'completed'">✓</span>
        </div>
      </div>
    </template>
  </el-calendar>
</template>

<style lang="scss" scoped>
.date-cell {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;

  .day-number {
    font-size: 14px;
    margin-bottom: 2px;
  }

  .task-indicator {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    border-radius: 50%;
    position: absolute;
    bottom: 2px;
    right: 2px;

    &.completed {
      color: #67c23a;
      background-color: #f0f9eb;
      border: 1px solid #67c23a;
    }

    &.completing {
      color: #fdf50c;
      background-color: #f0f9eb;
      border: 1px solid #fdf50c;
    }

    &.uncompleted {
      color: #e63c3c;
      background-color: #fdf6ec;
      border: 1px solid #e63c3c;
    }
  }
}
</style>
